1

最近开发时,遇到需要使用同一域名承载多个前端项目的场景,具体需求如下:

  1. /v2 访问新版本前端项目
  2. /api 访问后端 Spring Boot 接口服务
  3. / 访问默认前端项目

1. Nginx 配置内容

server {
    listen       80;
    listen       [::]:80;
    server_name  _;

    server_name_in_redirect off;
    proxy_set_header Host $host;

    location /api {
        proxy_pass http://0.0.0.0:0000;
    }

    location / {
        index  index.html;
        root /path/to/main/web/app;
    }

    location /v2 {
        index  index.html;
        alias /path/to/v2/web/app;
    }
}

注意 Nginx 的 alias 配置。此时,新前端项目需要被放在 /path/to/v2/web/app 路径下。

2. 修改 publicPath 配置

仅仅通过上述配置,在访问新版前端时,会遇到资源文件无法找到的问题。

此时,可以通过对新版前端 vue.config.js 文件中的 publicPath 进行配置,以规避这一问题( 注:该方法仅适用于 Vue-Cli 3.x 构建的项目 ):

module.exports = {
    ...
    
    publicPath: '/v2/',
    
    ...
};

参考链接

  1. Understanding the difference between the root and alias directives in Nginx
  2. Can't get two single page applications to run together on one server using nginx

dailybird
1.1k 声望73 粉丝

I wanna.